<template>
  <div>
    <el-card class="box-card"  shadow="hover">
      <div slot="header" class="clearfix" style="text-align: left;">
<!--        查询添加导航-->{{booksearch.bookid}}
          <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="书号">
              <el-input v-model="booksearch.bookid" placeholder="书号"></el-input>
            </el-form-item>
            <el-form-item label="书名">
              <el-input v-model="booksearch.bookname" placeholder="书名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" round plain @click="search">搜一下叭</el-button>
              <el-button type="success" icon="el-icon-circle-plus" plain round @click="addab">加一个呢</el-button>
              <el-button type="delete" icon="el-icon-delete-solid" plain round @click="delbk">删掉它！</el-button>
            </el-form-item>
          </el-form>
        </div>
      <div  class="text item">
    <!--    表格-->
    <el-table id:t1
        :data="books"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="bookid"
          label="书号"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="bookname"
          label="书名"
          align="center"
          width="396">
      </el-table-column>
      <el-table-column
          prop="authorname"
          label="作者"
          align="center"
          width="250">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          align="center"
          width="205">
      </el-table-column><el-table-column
        prop="inventory"
        label="库存"
        align="center"
        width="205">
    </el-table-column>
    </el-table>
      </div>
<!--分页导航-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[6, 12, 18, 24]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </el-card>
<!--对话框-->
<!--    使用引入的组件-->
    <BookAddUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshBookData="search(page,pagesize,booksearch)"></BookAddUpdate>


  </div>
</template>



<style>
.el-table .row1 {
  background: lightcyan;
}

.el-table .row2 {
  background:plum;
}

.el-pagination{
  text-align: right;
  margin-top: 10px;
}

</style>

<script>

import BookAddUpdate from "@/views/Book-Add-Update"

export default {
  components: {BookAddUpdate},
  data() {
    return {
      books: [],        //所有查找的图书集合
      page:1,           //当前页数
      total:100,        //总记录数
      pagesize:6,       //每页大小
      booksearch:{},    //代表当前搜索图书对象
      book:{},          //代表当前操作的图书对象
      dialogFormVisible:false,    // 是否显示对话框
      formLabelWidth:'100px',         // 对话框标签宽度
      title:'添加图书',
      addOrUpdateVisible:false,   // 引入的控件的显示与隐藏
    }

  },
  //创建后调用
  created() {
    this.findByPage(this.page,this.pagesize);
  },
  methods: {
//根据每行的索引给每行不同的背景
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'row1';
      } else if (rowIndex%2 === 0) {
        return 'row2';
      }
      return '';
    },
    //查询所有图书
    getAllBook(){
      this.axios.get("/book?cmd=list").then(({data}) =>{
        this.books = data
      })
    },
    //分页查询
    findByPage(page, pagesize) {
      this.axios.get(`/book?cmd=findByPage&page=${page}&pagesize=${pagesize}`).then(({data})=>{
        // console.log(data)
        this.books=data.rows
        this.total=data.total
      })
    },
    //条件分页查询
    search(){
      let booksearch = JSON.stringify(this.booksearch)
      this.axios.get(`/book?cmd=search&page=${this.page}&pagesize=${this.pagesize}&booksearch=${booksearch}`).then(({data})=>{
        this.books=data.rows
        this.total=data.total
      })
    },
    //更改每页大小
    addab(){
      //每次打开将内容清空
      this.book={}
      //显示对话框
      this.addOrUpdateVisible = true
      //修改标题
      this.title='添加图书'
      this.$nextTick(()=>{
        this.$refs.addOrUpdate.init();
      })
    },
    //添加
    add(){
      let this1 = this
      let page = this.page
      let pagesize = this.pagesize
      let book = JSON.stringify(this.book);
      this.axios.post(`/book?cmd=add&book=${book}`).then(({data})=>{
        if(data){
          this.$message({
            message: '添加成功咯！再查一下',
            type: 'success',
            onClose(){       // 关闭消息框时，刷新页面
              //刷新页面
              this1.findByPage(page,pagesize);
            }
          })
        }else{console.log("数据库那边出现问题了T-T")}
      })
    },
    //删除
    delbk(){
      let this1 = this
      let page = this.page
      let pagesize = this.pagesize
      let bookid = this.booksearch.bookid;
      this.axios.get(`/book?cmd=delbk&bookid=${bookid}`).then(({data}) =>{
        if(data){
          this.$message({
            message: '删辣删辣,在查查看',
            type: 'success',
            onClose(){       // 关闭消息框时，刷新页面
              //刷新页面
              this1.findByPage(page,pagesize);
            }
          })
        }else{console.log("删除出错了T-T")}
      })
    },
  handleSizeChange(val) {
    this.pagesize=val
    this.findByPage(this.page,val)
  },
  // 更改当前页
  handleCurrentChange(val) {
    this.page=val
    this.findByPage(val,this.pagesize)
  }
},


}
</script>

